<template>
  <div class="login-box">
    <Top />
    <div class="form-box">
      <van-form ref="formBox" @submit="submit">
        <van-cell-group inset>
          <van-field
            v-model="phone"
            center
            clearable
            label="手机号"
            name="phone"
            :rules="[
              { required: true, message: '请填入手机号' },
              { pattern: regPhone, message: '手机号错误' },
            ]"
          >
            <template #button>
              <van-button
                size="small"
                type="primary"
                @click="sendcode"
                :disabled="!enable"
                class="form-btn"
                >{{ enable ? "发送验证码" : time }}</van-button
              >
            </template>
          </van-field>
          <van-field
            v-model="codeRef"
            center
            clearable
            label="验证码"
            :rules="[
              { required: true, message: '请填入验证码' },
              { pattern: regCode, message: '验证码错误' },
            ]"
          >
            <template #button>
              <van-button size="small" type="primary" v-if="autocopy" @click="autowright" class="autoWright">填入</van-button>
            </template>
          </van-field>
        </van-cell-group>
        <div style="margin: 16px">
          <van-button round block type="primary" native-type="submit">
            立即登录/注册
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import api from "../api/index";
import Top from "../components/Top.vue";
import { Toast } from "vant";
import "vant/es/toast/style";
import { useStore } from "../store/index";
import { useRoute, useRouter } from "vue-router";
import { Notify } from "vant";
import "vant/es/notify/style";
const router = useRouter();
const route = useRoute();
const store = useStore();
const phone = ref("");
const codeRef = ref("");
const autocopy = ref(false)
const enable = ref(true);
const time = ref("60s");
let phoneco = ''
let regPhone =
  /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
let regCode = /^\d{6}$/;
let formBox = ref(null);
async function sendcode() {
  try {
    await formBox.value.validate("phone");
    let { code, phoneCode } = await api.phoneCode(phone.value, codeRef.value);
    if (+code !== 0) {
      Toast("当前网络繁忙");
      return;
    }
    phoneco = phoneCode
    Notify({
      type: "primary",
      message: `您的验证码为:${phoneCode}`,
      duration: 3000,
    });
    autocopy.value = true
    setTimeout(()=>{
      autocopy.value = false
    },3000)
    enable.value = false;
    time.value = "60s";
    let n = 60;
    let timer = setInterval(() => {
      n--;
      if (n === 0) {
        clearInterval(timer);
        enable.value = true;
        return;
      }
      time.value = `${n}秒`;
    }, 1000);
  } catch (error) {}
}
function autowright(){
  codeRef.value=phoneco
  autocopy.value=false
}
const submit = async () => {
  let { code, token } = await api.login(phone.value, codeRef.value);
  if (+code !== 0) {
    Toast("登录失败");
    formBox.value.resetValidation();
    codeRef.value = "";
    return;
  }
  localStorage.setItem("token", token);
  store.changeIsLogin(true);
  store.changeInfoAsync();
  store.changeStoreList(null)
  Toast("成功登录");
  //跳转地址判断
  let from = route.query.from;
  console.log("from",from);
  if (from) {
    router.replace(`/${from}`);
    return;
  }
  router.replace("/person");
};
</script>

<style lang="less" scoped>
.login-box {
  height: 100vh;

  .form-box {
    margin-top: 30px;
    .form-btn {
      width: 78px;
    }
    .autoWright {
      border-radius: 20px;
    }
  }
  /deep/ .van-cell__title {
    width: 60px;
  }
}
</style>
